<template>
	<view class="content padding-bottom-xl">
		<cu-custom dataHeight="100" :isBack="true" style="width: 100%;">
			<block slot="content">
				<text class="text-xl">配装模拟</text>
			</block>
		</cu-custom>
		<view class="head1">
			<image class="bg-set1" :src="bgimage"></image>
			<view class="meng1"></view>
		</view>
		<view class="info">
			<navigator url="/pages/index/peizhuang/index?type=0">
				<view class="info-left">
					<image class="head-image" :src="icon_wuxing"></image>
				</view>
			</navigator>
			<view class="info-right padding-left-sm">
				<view class="title">
					{{name}}
				</view>
				<view class="info-detail">
					{{info}}
				</view>
			</view>
		</view>
		<view class="box">
			<uni-row class="box-row">
				<uni-col :xs="3">
					<view style="width: 30rpx;height: 20rpx;"></view>
				</uni-col>
				<uni-col :xs="4" v-for="(item,index) in types" style="display: flex;" class="box-box1" :key="index">
					<view class="types">
						<view class="dian" :style="item.color"></view>
						<text class="box-row-text" :style="item.textColor">{{item.text}}</text>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view v-if="false">
			<text class="titleText">当前装备的位置是：{{title}}</text>
		</view>
		<!-- 装备框 -->
		<view class="box-box" ref='listData'>
			<uni-row class="box-row">
				<uni-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
					<view :style="boxCol1[index].style" class="box-box-box" v-for="(item,index) in boxCol1" :key="index"
						@click="open(0,list[type][0][index],index,item)">

						<view
							:style="[typeColors[list[type][0][index]].colorStyle, boxCol1[index].title === title ? typeColors[list[type][0][index]].shadowStyle : '']"
							class="box-box-box-box">

							<text :style="boxCol1[index].textStyle">
								{{typeColors[list[type][0][index]].text}}
							</text>
						</view>
					</view>
				</uni-col>
				<uni-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
					<view :style="boxCol2[index].style" @click="open(1,list[type][1][index],index,item)" :key="index"
						class="box-box-box1" v-for="(item,index) in boxCol2">
						<view
							:style="[typeColors[list[type][1][index]].colorStyle, boxCol2[index].title === title ? typeColors[list[type][1][index]].shadowStyle : '']"
							class="box-box-box-box" v-if="index!=3">
							<text :style="boxCol2[index].textStyle">
								{{typeColors[list[type][1][index]].text}}
							</text>
						</view>
					</view>
				</uni-col>
				<uni-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
					<view :style="boxCol3[index].style" @click="open(2,list[type][2][index],index,item)" :key="index"
						class="box-box-box2" v-for="(item,index) in boxCol3">
						<view
							:style="[typeColors[list[type][2][index]].colorStyle, boxCol3[index].title === title ? typeColors[list[type][2][index]].shadowStyle : '']"
							class="box-box-box-box">
							<text :style="boxCol3[index].textStyle">
								<!-- {{list[type][2][index]}} -->
								{{typeColors[list[type][2][index]].text}}
							</text>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<uni-popup ref="popup" :mask-click="false" style="z-index: 100000000;">
			<view class="pop-view">
				<view class="pop-title">
					<image src="https://jianxia.mazhoudao.com/h5/static/home/peizhuang/left-line.png"
						class="line-image"></image>
					<text class="title-text">装备属性</text>
					<image src="https://jianxia.mazhoudao.com/h5/static/home/peizhuang/right-line.png"
						class="line-image"></image>
				</view>
				<view class="pop-title-close">
					<image class="close-btn" src="https://jianxia.mazhoudao.com/h5/static/home/peizhuang/×.png"
						@click="close"></image>
				</view>
				<view class="pop-line"></view>
				<view class="pop-chose">
					<view class="pop-chose-c" v-for="(item,index) in typeColors" :key="index"
						@click="selectTypeF(index)">
						<view :style="typeColors[index].color" class="s-item">
							<text :style="typeColors[index].textColor">{{item.text}}</text>
							<image class="selectImage" :src="src" v-if="index==selectType"></image>
						</view>
					</view>
				</view>
				<button type="default" @click="goto" class="btn">确认</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// 注册自定义导航组件
	import cuCustom from '@/libs/colorui/components/cu-custom.vue';

	import {
		handleRequest
	} from '@/common/request.js'

	import groups from '@/utils/init/groups.js'

	export default {
		components: {
			cuCustom
		},
		data() {
			return {
				type: 1,
				//name:"天王·刀天王",
				icon_wuxing: "",
				choose_type: 0,
				selectTypeIndex: 0,
				src: "https://jianxia.mazhoudao.com/h5/static/home/peizhuang/select.png",
				bgimage: "https://jianxia.mazhoudao.com/h5/static/home/menpai/emei.png",
				selectCol: 0,
				selectIndex: 0,
				selectType: 0,
				title: '衣物',
				style: "",
				rolelist: [],

				// 装备位置
				colSelect: '',

				// 门派ID
				mainId: 0,

				// 门派分支ID
				branchId: 1,
				list: [
					[
						[3, 1, 4, 3],
						[2, 0, 4],
						[0, 2, 1]
					],
					[
						[0, 4, 2, 0],
						[3, 1, 2],
						[1, 3, 4]
					],
					[
						[4, 3, 0, 4],
						[1, 2, 0],
						[2, 1, 3]
					],
					[
						[2, 0, 1, 2],
						[4, 3, 1],
						[3, 4, 0]
					],
					[
						[1, 2, 3, 1],
						[0, 4, 3],
						[4, 0, 2]
					]
				],
				typeColors: [{
						shadowStyle: {
							boxShadow: '0 0 15px 5px rgba(241, 239, 65, .7)',
						},
						colorStyle: {
							background: 'rgba(241, 239, 65, 0.4)',
							border: '2px solid #F1EF41'
						},
						color: "background: rgba(241, 239, 65, 0.4);border: 2px solid #F1EF41;",
						text: "金",
						textColor: "color: #8D8C0F;"
					},
					{
						shadowStyle: {
							boxShadow: '0 0 15px 5px rgba(15, 221, 112, .7)',
						},
						colorStyle: {
							background: 'rgba(15, 221, 112, 0.4)',
							border: '2px solid #0FDD70'
						},
						shadow: "box-shadow:0 15px 5px rgba(15, 221, 112, .7)",
						color: "background: rgba(15, 221, 112, 0.4);border: 2px solid #0FDD70;",
						text: "木",
						textColor: "color: #0E8345;"
					},
					{
						shadowStyle: {
							boxShadow: '0 0 15px 5px rgba(78, 124, 255, .7)',
						},
						colorStyle: {
							background: 'rgba(78, 124, 255, 0.4)',
							border: '2px solid #4E7CFF'
						},
						shadow: "box-shadow:0 15px 5px rgba(78, 124, 255, .7);",
						color: "background: rgba(78, 124, 255, 0.4);border: 2px solid #4E7CFF;",
						text: "水",
						textColor: "color: #1C3FA4;"
					},
					{
						shadowStyle: {
							boxShadow: '0 0 15px 5px rgba(255, 90, 0, .7)',
						},
						colorStyle: {
							background: 'rgba(255, 90, 0, 0.4)',
							border: '2px solid #FF5A00'
						},
						color: "background: rgba(255, 90, 0, 0.4);border: 2px solid #FF5A00;",
						text: "火",
						textColor: "color: #9F4616;"
					},
					{
						shadowStyle: {
							boxShadow: '0 0 15px 5px rgba(254, 207, 179, .7)',
						},
						colorStyle: {
							background: 'rgba(254, 207, 179, 0.4)',
							border: '2px solid #FECFB3'
						},
						color: "background: rgba(254, 207, 179, 0.4);border: 2px solid #FECFB3;",
						text: "土",
						textColor: "color: #A95D30;"
					}
				],
				boxCol1: [{
						style: "width: 96rpx;height: 168rpx;margin-top: 200rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:168rpx;",
						title: '面具'
					},
					{
						style: "width: 96rpx;height: 96rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:96rpx;",
						title: '护腕'
					},
					{
						style: "width: 96rpx;height: 96rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:96rpx;",
						title: '戒指'
					},
					{
						style: "width: 96rpx;height: 168rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:168rpx;",
						title: '腰坠'
					},
				],
				boxCol2: [{
						style: "width: 168rpx;height: 168rpx;margin-top: 80rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:168rpx;",
						title: '顶戴'
					},
					{
						style: "width: 168rpx;height: 240rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:240rpx;",
						title: '衣物'
					},
					{
						style: "width: 168rpx;height: 84rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:84rpx;",
						title: '腰带'
					},
					{
						style: "width: 168rpx;height: 240rpx;margin-top: 40rpx;background: rgba(198, 184, 199, 0.2);border: 2px solid #5E515F;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:240rpx;",
						title: '马匹'
					},
				],
				boxCol3: [{
						style: "width: 168rpx;height: 84rpx;margin-top: 200rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:84rpx;",
						title: '劲带'
					},
					{
						style: "width: 168rpx;height: 324rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:324rpx;",
						title: '武器'
					},
					{
						style: "width: 168rpx;height: 168rpx;margin-top: 40rpx;",
						textStyle: "color: #FFFFFF; width: 100%;height:100%; line-height:168rpx;",
						title: '鞋子'
					}
				],
				types: [{
						color: "background: #F1EF41;",
						text: "金",
						textColor: "color: #F1EF41;"
					},
					{
						color: "background: #0FDD70;",
						text: "木",
						textColor: "color: #0FDD70;",
					},
					{
						color: "background: #4E7CFF;",
						text: "水",
						textColor: "color: #4E7CFF;"
					},
					{
						color: "background: #FF5A00;",
						text: "火",
						textColor: "color: #FF5A00;"
					},
					{
						color: "background: #FECFB3;",
						text: "土",
						textColor: "color: #FECFB3"
					}
				],
				//info: "活动期间，玩家可以通过礼包发放地址领取激活码。开服后大侠可在各大主城，新手村npc“龙儿”处输入激活码，即可兑换单思南新手礼包（自兑换起时限7天），开启礼。"
			}
		},
		onLoad(options) {
			// console.log('222222',options)
			// if(options.name==='tianwang'){
			// 	console.log('33333')

			// }


			switch (options.choose_type) {
				case "0":
				case "1": {
					this.type = 0
					break;
				}
				case "2":
				case "3": {
					this.type = 1
					break;
				}
				case "4":
				case "5": {
					this.type = 2
					break;
				}
				case "6":
				case "7": {
					this.type = 3
					break;
				}
				case "8":
				case "9": {
					this.type = 4
					break;
				}
			}
			this.choose_type = options.choose_type,
				this.selectTypeIndex = options.selectTypeIndex,
				this.rolelist = this.$Global.JobType,
				this.bgimage = options.name ? "https://jianxia.mazhoudao.com/h5/static/home/menpai/" + options.name +
				".png" : "https://jianxia.mazhoudao.com/h5/static/home/menpai/emei.png"
			this.icon_wuxing = this.$Global.WuXing_Res[this.rolelist[this.choose_type].WX_type].res
			this.name = this.rolelist[this.choose_type]
				.name //+"·"+this.rolelist[this.choose_type].branch[this.selectTypeIndex]+this.rolelist[this.choose_type].name
			if (options.mainId) this.mainId = options.mainId
			if (options.branchId) this.branchId = options.branchId
			if (options.from) this.from = options.from
		},
		computed: {
			info: {
				get() {

					if (this.nIndex > 0) {
						let info = '';

						groups.some(item => {
							return item.list.some((item) => {
								if (item.full_name === this.name) {
									info = item.desc;
									return item.full_name === this.name;
								}
							})
						})

						return info;
					} else {
						return this.mainId ? groups[this.mainId]['list'][0].desc :
							'活动期间，玩家可以通过礼包发放地址领取激活码。开服后大侠可在各大主城，新手村npc“龙儿”处输入激活码，即可兑换单思南新手礼包（自兑换起时限7天），开启礼。';
					}
				},
				set(newVal) {

				}
			},
			name: {
				get() {
					return this.mainId ? groups[this.mainId].name : ''
				},
				set() {

				}
			}
		},
		methods: {
			open(col, witch, index, item) {
				// console.log('颜色'+col,'宽度'+witch,'index'+index,'item'+item.title)
				// if(col===0&&index===0)
				// {
				// 	this.title=item.title
				// 	// this.typeColors[3].color ="background:red;"
				// 	// this.typeColors[list[type][0][index]].color="background:red;"
				// 	// this.boxCol1[index].textStyle = "color: red; width: 100%;height:100%; line-height:168rpx;"
				// 	this.boxCol1[index].textStyle += "color:red;"

				// }
				// if(col===0&&index===1)
				// {
				// 	// this.boxCol1[index].textStyle = "color:#FFFFFF;"
				// 	this.title=item.title


				// }





				if (col === 1 && index === 3) {

				} else {
					this.selectIndex = index
					this.selectCol = col
					this.selectType = witch
					// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
					this.$refs.popup.open("top")
				}
			},
			close() {
				console.log('6666666666')
				this.$refs.popup.close()
			},
			goto() {
				this.colSelect = `tag_${this.selectCol}_${this.selectIndex}`;

				if (this.selectCol == 0) {
					this.title = this.boxCol1[this.selectIndex].title
				} else if (this.selectCol == 1) {
					this.title = this.boxCol2[this.selectIndex].title
				} else if (this.selectCol == 2) {
					this.title = this.boxCol3[this.selectIndex].title
				}

				var that = this;
				var i = 0;
				try {
					that.list.forEach(function(item, index) {
						if (item[that.selectCol][that.selectIndex] === that.selectType) {
							throw new Error("find");
						}
						i = i + 1;
					});
				} catch (e) {
					if (e.message != "find") throw e;
				}
				that.type = i;
				this.$refs.popup.close()
			},
			selectTypeF(index) {
				this.selectType = index
			}
		}
	}
</script>

<style>
	page {
		background-color: #1F282C;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
	}

	.bottom {
		width: 100%;
	}

	.bg-set {
		position: fixed;
		width: 100%;
		height: 326rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.head {
		display: flex;
		float: left;
		/* z-index: 10000; */
		width: 100%;
		height: 326rpx;
	}

	.meng {
		margin-top: 155rpx;
		width: 750rpx;
		height: 173rpx;
		background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
	}

	.head1 {
		float: left;
		z-index: 1;
		width: 100%;
		height: 326rpx;
		margin-top: -200rpx;
		background-color: #1F282C;
	}

	.bg-set1 {
		/* position: fixed; */
		width: 100%;
		height: 326rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.meng1 {
		margin-top: -180rpx;
		width: 750rpx;
		height: 176rpx;
		background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
	}


	.top {
		left: ;
	}

	.info {
		display: flex;
		float: left;
		z-index: 10001;
		width: 90%;
		height: 200rpx;
		margin-top: -100rpx;
		background-color: #405C69;
		border-radius: 10px;
	}

	.head-image {
		height: 76rpx;
		width: 50rpx;
		border-top-left-radius: 20rpx;
	}

	.info .info-left {
		height: 100%;
	}

	.info .info-right {
		overflow: hidden;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}

	.info .info-right .title {
		margin-top: 16rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
	}

	.info .info-right .info-detail {
		margin-top: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		color: #A0AAAF;
		font-size: 24rpx;
		line-break: 3;

	}

	.box {
		height: 50rpx;
		display: flex;
		float: left;
		z-index: 10001;
		width: 90%;
		margin-top: 20rpx;
	}

	.box-box {
		width: 100%;
		text-align: center;
	}

	.box-row {
		width: 100%;
		height: 100%;
		float: left;
	}

	.uni-row {
		width: 100%;
	}

	.box .uni-row .types {
		height: 100%;
		min-width: 100rpx;
	}

	.dian {
		width: 14rpx;
		height: 14rpx;
		margin-top: 17rpx;
		border-radius: 50%;
		float: left;
	}



	.box-row-text {
		margin-left: 10rpx;
	}

	.box-box1 {
		margin-left: 0rpx;
	}

	.box-box-box {
		margin-left: 70rpx;
	}

	.box-box-box1 {
		margin-left: 20rpx;
	}

	.box-box-box2 {
		margin-left: 20rpx;
	}

	.box-box-box-box {
		width: 100%;
		height: 100%;
	}

	/* 弹出层 */
	.pop-view {
		margin-left: 85rpx;
		margin-right: 85rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 400rpx;
	}

	.pop-view .pop-line {
		width: 100%;
		height: 1px;
		background-color: #DDDDDD;
		margin-top: 40rpx;
	}

	.pop-view .pop-title {
		text-align: center;
		margin-top: 440rpx;
		padding-top: 40rpx;
		padding-right: 10rpx;
	}

	.pop-view .pop-title .title-text {
		font-size: 36rpx;
		color: #2FABD7;
	}

	.pop-view .pop-title .line-image {
		height: 24rpx;
		width: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.pop-view .pop-title-close .close-btn {
		width: 29rpx;
		height: 29rpx;
		float: right;
		margin-top: -40rpx;
		margin-right: 40rpx;
	}

	.pop-view .btn {
		width: 226rpx;
		height: 80rpx;
		background-color: #57BEF2;
		border-width: 0px;
		color: #FFFFFF;
		line-height: 40px;
	}

	.pop-view .pop-chose {
		width: 100%;
		height: 250rpx;
		/* background-color: #0000FF; */
	}

	.pop-chose {
		width: 100%;
		float: left;
	}

	.chose-image-r {
		margin-top: 80rpx;
		width: 90rpx;
		height: 90rpx;
		margin-left: 138rpx;
	}

	.chose-image-l {
		margin-top: 80rpx;
		width: 90rpx;
		height: 90rpx;
		margin-left: 138rpx;
	}

	.pop-chose-c {
		float: left;
		margin-top: 80rpx;
	}

	.s-item {
		width: 96rpx;
		height: 90rpx;
		margin-left: 10rpx;
		line-height: 90rpx;
		text-align: center;
	}

	.selectImage {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		margin-top: 70rpx;
		margin-left: 10rpx;
	}

	.titleText {
		color: white;
		font-size: 38rpx;
	}

	.pitch {
		display: flex;
	}
</style>
